<template>
	<view class="page" :style="{backgroundImage: 'url(' + commonData.mineData.mineTopBg +')'}">
		<u-navbar title="作品库" title-color="#111111" :background="background"></u-navbar>

		<view class="flex-col">
			<view class="flex-col self-stretch group">

				<view class="mt-20 flex-col items-center">
					<view class="flex-col">
						<view class="flex-row self-stretch group_6">
							<text class="font_4" @click="changeType(index)" :class="current == index ? 'active' : ''"
								v-for="(item,index) in tabs" :key="index">{{item}}</text>
							<!-- <text class="font_4 text_9 ml-90-5">{{item}}</text> -->
						</view>
						<!-- <view class="self-start section_2"></view> -->
					</view>
					<view class="" v-if="current == 0">
						<view class="flex-row equal-division" v-if="videoList.length > 0">
							<view class="flex-col group_7 equal-division-item" v-for="(item,index) in videoList"
								:key="index">
								<!-- <view class="flex-col justify-start self-stretch section_4 relative">
									<view class="flex-col section_3 items-center justify-center" v-if="item.status == 0">
										<text class="self-center text_10">视频生成中</text>
										<view class="flex-col justify-center items-start section_6">
											<image class="hecheng-loading-img"
												src="https://terminator.axu9.com/images/hecheng-loading.gif" mode="">
											</image>
										</view>
									</view>
									<view class="flex-col section_3 items-center justify-center" v-if="item.status == 2">
										<text class="self-center text_10">视频生成失败</text>
									</view>
									<view class="options flex-col">
										<image @click="delVideoModel(item.id)" class="image_4"
											src="https://terminator.axu9.com/images/del-icon.png" />
										<image v-if="item.status == 1" @click="downloadVideo(item.videoUrl,item.title)"
											class="image_4 mt-10-5"
											src="https://terminator.axu9.com/images/download-icon.png" />
										
									</view>
									<video :src="item.videoUrl" object-fit="cover" class="video-poster"></video>
								</view> -->
								<view class="flex-col justify-start self-stretch section_4 relative">
									<view class="options flex-col">
										<image @click="delVideoModel(item.id)" class="image_4"
											src="https://terminator.axu9.com/images/del-icon.png" />
										<!-- <image v-if="item.status == 1" @click="downloadVideo(item.videoUrl,item.title)"
											class="image_4 mt-10-5"
											src="https://terminator.axu9.com/images/download-icon.png" /> -->
											<image v-if="item.status == 1 && item.is_qiniu == 1" @click="downloadVideo(item.videoUrl,item.title)"
												class="image_4 mt-10-5"
												src="https://terminator.axu9.com/images/download-icon.png" />
											<view @click="clickLoadding" v-if="item.status == 1 && item.is_qiniu != 1" class="huancun-icon mt-10-5 flex-row justify-center items-center">
												<image
													 class="img-huancun"
													src="https://terminator.axu9.com/images/huancunzhong.gif" />
											</view>
									</view>
									<view class="flex-col section_3 items-center justify-center" v-if="item.status == 0" :style="{backgroundImage: 'url(' + commonData.mineData.mineVideoPoster +')'}">
										<text class="self-center text_10">视频生成中</text>
										<view class="flex-col justify-center items-start section_6">
											<image class="hecheng-loading-img"
												src="https://terminator.axu9.com/images/hecheng-loading.gif" mode="">
											</image>
										</view>
									</view>
									<view class="flex-col section_3 items-center justify-center" v-if="item.status == 2" :style="{backgroundImage: 'url(' + commonData.mineData.mineVideoPoster +')'}">
										<text class="self-center text_10">视频生成失败</text>
									</view>
									<view class="" v-if="item.status == 1">
								
										<video :src="item.videoUrl" play-strategy="1" object-fit="cover"
											class="video-poster" :vslide-gesture-in-fullscreen="false"></video>
									</view>
								
								</view>
								<view @click="toDetail(item)" class="flex-row items-center" style="min-height: 80rpx;">
									<text class="self-start font_5 text_12 mt-12-5" v-if="item.disabled" style="max-width: 80%;">{{item.title}}</text>
									<input class="self-start font_5 text_12 mt-12-5" @click.stop="inputVideoTitle(item.id,index)" v-else type="text"
										v-model="item.title" @blur="inputVideoTitleBlur($event,item.id)" />
									<image @click.stop="editVideoTitle(index)" v-if="item.videoUrl != null" class="edit-title-img"
										src="https://terminator.axu9.com/images/edit-video-title.png" />
								</view>
							</view>
												
							
						</view>
						<view class="" v-else>
							<image class="image_empt"
								src="../../static/image/other/empty-img.png" />
						</view>
						
					</view>
					<view class="flex-col items-center" v-if="current == 1">
						<view @click="toAddAudio" class="add-voice flex-row items-center justify-center" :style="{backgroundImage: 'url(' + commonData.worksLibrary.mineAddAudioBg +')'}" >
							<image class="add-voice-img" :src="commonData.worksLibrary.addBgWhiteIcon"
								mode=""></image>
							<text class="add-voice-text">添加音频</text>
						</view>
						<view class="voice-list" v-if="voiceList.length > 0">
							<view class="voice-list-item flex-row justify-between items-center"
								v-for="(item,index) in voiceList" :key="index" @click="audioClick(index,item)">

								<view class="voice-list-item-lf flex-1 flex-col justify-center">
									<view class="">
										{{item.title}}
									</view>
									<view class="" style="margin-top: 10rpx;">
										{{item.duration}}
									</view>
								</view>
								
								<image v-if="audioIndex == index" class="image_55"
									:src="commonData.worksLibrary.playingGif" />
								<view class="flex-row justify-between">

									<view class="flex-row">
										<image @click.stop="editClick(item.id,item.title)" class="image_opt" :src="commonData.worksLibrary.editAudioIcon" />
										<image @click.stop="delClick(item.id)" class="image_opt"
											:src="commonData.worksLibrary.delAudioIcon" />
									</view>
								</view>

							</view>
							
						</view>
						<view class="" v-else>
							<image class="image_empt"
								src="../../static/image/other/empty-img.png" />
						</view>

					</view>
				</view>
			</view>
		</view>
		<!-- 登录弹窗 -->
		<ns-login ref="login" @loginSuccess="loginSuccess"></ns-login>
		<!-- 绑定手机号弹窗 -->
		<bind-phone ref="bindPhone" @bindSuccess="bindSuccess"></bind-phone>
		<!-- 修改音色标题弹窗 -->
		<edit-title ref="editTitle" :audioTitle="audioTitle" @editSuccess="editSuccess"></edit-title>
		<!-- 下载视频进度条弹窗 -->
		<progressPop ref="progressPop" :isShow="false" :percent="percent" @cancel="showProgressCancel"></progressPop>
		
		
	</view>

</template>

<script>
	import commonData from '@/common/js/data.js';
	import nsLogin from "../../components/ns-login/ns-login.vue";
	import bindPhone from "../../components/bindPhone/index.vue";
	import editTitle from "../../components/editTitlePop/index.vue";
	import progressPop from "../../components/progressPop/index.vue";
	import {
		getAudioPage,
		checkUserInfo,
		getUserinfo,
		delAudio,
		getService
	} from "@/api/user.js"
	import {
		getVideoAnimate,
		updateVideoTitle
	} from "@/api/video.js"
	import {
		getTimbre,
		updateMp3
	} from "@/api/audio.js"
	// const innerAudioContext = uni.createInnerAudioContext();
	// innerAudioContext.autoplay = true;
	export default {
		data() {
			return {
				statusShow: false, //查看视频上传状态弹窗
				uploadStatus: '', //视频上传状态

				disabled: false,
				btnWidth: 180,
				show: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],


				avatar: 'https://terminator.axu9.com/images/avatar.png', //头像
				nickname: '微信用户',
				serviceName: '', //服务商名称
				address: '', //服务商地址
				tel: '', //服务商电话
				score: 0, //分数
				voiceList: [], //我的音色列表
				videoList: [], //我的合成视频列表
				tabs: [
					'作品', '语音'
				],
				current: 0,
				videoListid: 0, //删除视频的列表id
				// playIndex: 0,//
				audioIndex: -1, //播放的index
				innerAudioContext: null,
				playIndex: -1, //点击的index
				phoneNum: '', //授权手机号
				level: 0, //身份 0普通用户 1银牌 2金牌
				audioTitle: '',//音频标题
				audioId: '',//音频id
				pageVideo: 1,//视频列表分页
				totalPageVideo: 1,
				pageAudio: 1,//音频列表分页
				totalPageAudio: 1,
				percent: 0,
				downloadTask: null, //上传视频任务
				commonData: {}
			}
		},
		components: {
			nsLogin,
			bindPhone,
			editTitle,
			progressPop
		},
		onLoad(options) {
			this.current = options.current ? options.current : 0
			this.getVideoAiduo();
			// this.getTimbreList();
			this.checkUserInfo();
			this.getUserinfo();
			this.getPurchase();
		},
		onShow() {
			this.commonData = commonData;
			if (!uni.getStorageSync('userId')) {
				this.$refs.login.open()
				return
			}
			if(this.current == 0){
				this.voiceList = [];
				this.pageAudio = 1;
			}else {
				this.videoList = [];
				this.pageVideo = 1;
			}
			// this.getVideoAiduo();
			// // this.getTimbreList();
			// this.checkUserInfo();
			// this.getUserinfo();
			// this.getPurchase();
		},
		onReachBottom() {
			console.log('走了么')
			if(this.current == 0){
				if(this.pageVideo <this.totalPageVideo){
					this.pageVideo ++;
					this.getVideoAiduo();
				}else {
					uni.showToast({
						title:'已加载全部',
						icon: 'none'
					})
				}
			}else {
				console.log(this.pageAudio,this.totalPageAudio,'this.totalPageAudio')
				if(this.pageAudio <this.totalPageAudio){
					this.pageAudio ++;
					this.getVideoAiduo();
				}else {
					uni.showToast({
						title:'已加载全部',
						icon: 'none'
					})
				}
			}
			
		},
		created() {
			this.contextInit();
		},
		onHide() {
			console.log(this.innerAudioContext,'this.innerAudioContext')
			if(this.innerAudioContext){
				this.innerAudioContext.stop();
				this.innerAudioContext.destroy();
			}
		},
		beforeDestroy() {
			console.log('离开')
			this.innerAudioContext.stop();
			this.innerAudioContext.destroy();
		},
		// onShareAppMessage: function (res) {},//分享好友
		// onShareTimeline(){},//分享朋友圈
		methods: {
			showProgressCancel() {
				this.$refs.progressPop.close();
				
			},
			// 跳转到视频详情页
			toDetail(item){
				console.log(item,'item')
				uni.navigateTo({
					url: '/pagesMine/videoDetail/index?originalVideoUrl=' + item.originalVideoUrl + '&videoUrl=' + item.videoUrl
				})
			},
			// 兑换记录
			toExchange() {
				uni.navigateTo({
					url: '/pagesMine/exchangeREcordsTotal/index'
				})
			},
			// 更多
			toMore() {
				uni.showToast({
					title: '开发中',
					icon: 'none'
				})
			},
			getPurchase() {
				getService().then(res => {
					console.log(res, 'gg');
					if (res.errno == 0) {
						this.serviceName = res.data.store_company_name;
						this.address = res.data.store_company_address;
						this.tel = res.data.store_company_tel;
					}


				}).catch(err => {

				})
			},
			// 跳转到采购商
			toPurchaser() {
				uni.navigateTo({
					url: '/pagesMine/purchaser/index'
				})
			},

			contextInit() {
				let that = this;
				var innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = false;

				innerAudioContext.loop = false;
				innerAudioContext.onPlay(() => {
					that.audioIndex = that.playIndex;
					// that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
					// that.audioPlay(); 
					console.log('开始播放', that.audioIndex);
				});
				innerAudioContext.onPause(() => {
					that.audioIndex = -1;
					// that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
					// that.audioPlay(); 
					console.log('暂停播放');
				});
				innerAudioContext.onTimeUpdate(function() {
					// that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
				});
				innerAudioContext.onEnded(function() {
					that.audioIndex = -1;
					// that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
					// that.audioPlay(); 
					console.log('暂停播放');
					// that.audioPause(); 
				});

				innerAudioContext.onError((res) => {
					console.log(res, '错误')
				});
				that.innerAudioContext = innerAudioContext
			},
			// // 播放音频
			// playAudio(index, item) {
			// 	console.log(index, item.mp3, 'llllll')
			// 	uni.showLoading({
			// 		title: '加载音频中',
			// 		icon: 'none'
			// 	})
			// 	this.playIndex = index;
			// 	console.log(this.playIndex, this.audioIndex, '/////')
			// 	this.innerAudioContext.src = item.mp3;
			// 	this.innerAudioContext.play()
			// },
			// pauseAudio(index, item) {
			// 	this.innerAudioContext.pause()
			// },
			audioClick(index, item) {
				console.log(item.mp3, 'llllllll')
				this.timbreUrl = item.mp3;
				let status = item.status;
				this.timbreId = item.id;
				this.timbreType = item.type;
				console.log(index, item.isClick, this.innerAudioContext.paused, '点击音频qqqqqq')
				var arr = this.voiceList.map((items, indexs) => {
					return {
						...items,
						isClick: index == indexs ? true : false
					}
				})
				this.voiceList = arr;
				if(status == 0 || status == 2){
					uni.showToast({
						title:'音频无法播放',
						icon: 'none'
					})
					return
				}
				if (!item.isClick) {
					this.innerAudioContext.stop();
					this.playIndex = index; //播放的音频的下标
					this.innerAudioContext.src = item.mp3;
					this.innerAudioContext.play()
				} else {
					if (this.innerAudioContext.paused) {
						this.playIndex = index; //播放的音频的下标
						this.innerAudioContext.src = item.mp3;
						this.innerAudioContext.play()
					} else {
						this.innerAudioContext.pause()
					}
				}
				// if(!this.innerAudioContext.paused){
				// 	this.playIndex = index;//播放的音频的下标
				// 	this.innerAudioContext.src = item.result_url;
				// 	this.innerAudioContext.play()
				// }

				// // if(this.audioIndex == index){
				// 	if(!this.innerAudioContext.paused){
				// 		this.innerAudioContext.stop()
				// 		// this.audioIndex = -1;
				// 		if(this.audioIndex == index){
				// 			this.innerAudioContext.pause()
				// 		}

				// 	}else {
				// 		this.playIndex = index;
				// 		this.innerAudioContext.src = item.url;
				// 		// if(this.audioIndex == index){
				// 			// this.innerAudioContext.pause()
				// 		// }
				// 		this.innerAudioContext.play()
				// 	}
				// // }

			},
			delVideoModel(id) {
				this.videoListid = id;
				var _this = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该视频么？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_this.delVideo();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			// 删除音色接口
			delAudio() {
				console.log('删除音色')
			},
			// 删除 音频 视频
			delVideo() {

				uni.showLoading({
					title: '删除中'
				})
				delAudio({
					id: this.videoListid,
					type: this.current
				}).then(res => {
					uni.hideLoading();
					if (res.errno == 0) {
						if(this.current == 0){
							this.videoList = [];
							this.pageVideo = 1;
							
						}else {
							this.voiceList = [];
							this.pageAudio = 1;
						}
						this.getVideoAiduo();
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}

				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					})
				})
			},
			// 修改标题
			editSuccess(data){
				console.log(data,'editSuccess')
				this.audioTitle = data;
				uni.showLoading({
					title: '修改中'
				})
				updateMp3({
					id: this.audioId,
					title: this.audioTitle
				}).then(res => {
					uni.hideLoading();
					if(res.errno == 0){
						this.$refs.editTitle.close();
						this.audioTitle = '';
						this.audioId = '';
						this.voiceList = [];
						this.pageAudio = 1;
						uni.showToast({
							title: '修改成功',
							icon: 'none',
							duration: 1000
						})
						this.getVideoAiduo();
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading();
					ni.showToast({
						title: '操作失败',
						icon: 'none'
					})
				})
			},
			downloadVideoAuthSuccess(url, fileName){
				var _this = this;
				uni.showLoading({
					title: '下载中'
				})
				_this.downloadTask = uni.downloadFile({
					url: url,
					success: function(res) {
						uni.hideLoading();
						var filePath = res.tempFilePath;
						console.log(res, 'reeeeee')
						uni.saveVideoToPhotosAlbum({
							filePath: res.tempFilePath,
							success: res => {
								uni.hideLoading()
								uni.showToast({
									title: "保存成功",
									duration: 2000,
								})
								setTimeout(() => {
									_this.$refs.progressPop.close();
									_this.percent = 0;
								}, 1000)
							},
							fail() {
								uni.showToast({
									title: "保存失败",
									icon: 'none',
									duration: 2000,
								})
								_this.$refs.progressPop.close();
								_this.percent = 0;
							}
						})
					},
					fail: function(err) {
						uni.hideLoading();
						console.log(err, 'errr')
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						})
						_this.$refs.progressPop.close();
					}
				})
				_this.downloadTask.onProgressUpdate((res) => {
					
					if (res.progress > 0) {
						uni.hideLoading();
						_this.$refs.progressPop.open();
					}
					_this.percent = res.progress;
					if (_this.percent >= 100) {
						
						// setTimeout(() => {
						// 	_this.$refs.progressPop.close();
						// 	_this.percent = 0;
						// }, 1000)
					
					
					}
				})
			},
			// 点击未上传到七牛图标
			clickLoadding(){
				uni.showToast({
					title: '缓存中',
					icon: 'none'
				})
			},
			// 下载视频
			downloadVideo(url, fileName) {
				this.$isAuthorize('scope.writePhotosAlbum',{title: '保存视频权限',content: '为了将视频保存到您的相册，我们需要获取相应的存储权限。请允许我们访问您的存储，以便我们能够正确保存视频。'}).then(res=> {
					console.log(res,'授权')
					if(res == true){
						// 已授权
						console.log('已授权')
						// recorderManager.start();
						this.downloadVideoAuthSuccess(url, fileName)
					}else {
						// 未授权打开授权
						console.log('未授权')
					}
				})
				
			},
			// // 下载视频
			// downloadVideo(url, fileName) {
			// 	uni.showLoading({
			// 		title: '下载中'
			// 	})
			// 	uni.downloadFile({
			// 		url: url,
			// 		success: function(res) {
			// 			uni.hideLoading();
			// 			var filePath = res.tempFilePath;
			// 			console.log(res, 'reeeeee')
			// 			uni.saveVideoToPhotosAlbum({
			// 				filePath: res.tempFilePath,
			// 				success: res => {
			// 					uni.hideLoading()
			// 					uni.showToast({
			// 						title: "保存成功",
			// 						duration: 2000,
			// 					})
			// 				}
			// 			})
			// 		},
			// 		fail: function(err) {
			// 			uni.hideLoading();
			// 			console.log(err, 'errr')
			// 			uni.showToast({
			// 				title: '下载失败',
			// 				icon: 'none'
			// 			})
			// 		}
			// 	})
			// },
			// 查看视频状态
			viewVideoStatus(videoId) {

				getVideoAnimate({
					video_id: videoId
				}).then(res => {
					console.log(res, 'getVideoAnimate')
					this.statusShow = true;
					this.uploadStatus = res.data.status;
				})
			},
			delClick(id) {
				this.videoListid = id;
				var _this = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该音频么？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_this.delVideo();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			// 编辑音频标题
			editClick(id,title){
				this.audioTitle = title;
				this.audioId = id;
				console.log(this.audioTitle,'1111')
				this.$refs.editTitle.open();
			},
			actionClick(index, index1) {
				console.log(index, index1, '11111')
				if (index1 == 0) {
					this.videoListid = this.voiceList[index].id;
					var _this = this;
					uni.showModal({
						title: '提示',
						content: '确定删除该音频么？',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								_this.delVideo();
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
					// this.list.splice(index, 1);
					// this.$u.toast(`删除了第${index}个cell`);
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			},

			// 获取音色列表
			getTimbreList() {
				getTimbre({
					uid: uni.getStorageSync("userId"),
					type: 2, //0 全部 1系统  2我的
				}).then(res => {
					console.log(res.data, '获取音色列表')
					var arr = res.data.map(item => {
						return {
							...item,
							isClick: false
						}
					})
					this.timbreList = arr;
				}).catch(err => {

				})
			},
			// 获取用户信息
			getUserinfo() {
				getUserinfo({
					uid: uni.getStorageSync("userId")
				}).then(res => {
					console.log(res.data, 'getUserinfo')
					this.avatar = res.data.avatarUrl;
					this.nickname = res.data.nickName;
					this.score = res.data.integral;
					this.level = res.data.level_id;
					uni.setStorageSync('mobile', res.data.mobile);
				}).catch(err => {

				})
			},
			// 验证会员信息
			checkUserInfo() {
				checkUserInfo({
					uid: uni.getStorageSync("userId")
				}).then(res => {
					console.log(res.data, 'checkUserInfo')

				}).catch(err => {

				})
			},
			inputVideoTitle(id, index){
				console.log(id, index, '编辑')
				this.inputVideoIndex = index;
				this.inputVideoId = id;
				
			},
			inputVideoTitleBlur(e, id) {
				console.log(e, id, 'blur')
				let title = e.detail.value;
				if (title == '') {
					uni.showToast({
						title: '标题不能为空',
						icon: 'none'
					})
					this.videoList = [];
					this.pageVideo = 1;
					this.getVideoAiduo();
					return
				}
				// this.getVideoAiduo();
				uni.showLoading({
					title: '修改中'
				})
				updateVideoTitle({
					id: id,
					title: title
				}).then(res => {
					uni.hideLoading();
					if (res.errno == 0) {
						uni.showToast({
							title: '修改成功',
							icon: "none",
							duration: 1000
						})
						this.videoList = [];
						this.pageVideo = 1;
						this.getVideoAiduo();
						// this.timer = setInterval(()=>{
						// 	this.getVideoAiduo();
						// },1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading();
					ni.showToast({
						title: '操作失败',
						icon: 'none'
					})
				})
			
			},
			editVideoTitle(index) {
				// if(this.timer){
				// 	clearInterval(this.timer)
				// }
				this.videoList[index].disabled = false;
			},
			// 获取音频 视频列表
			getVideoAiduo() {
				// pageVideo: 1,//视频列表分页
				// totalPageVideo: 1,
				console.log(this.current,'this.current == 0')
				// var page;
				// if(this.current == 0){
				// 	page = this.pageVideo
				// }else {
				// 	page = this.pageAudio
				// }
				
				getAudioPage({
					uid: uni.getStorageSync("userId"),
					type: this.current,
					page: this.current == 0 ? this.pageVideo : this.pageAudio
				}).then(res => {
					console.log(res.data, 'resssss')
					if (this.current == 0) {
						// this.videoList = res.data.data;
						this.totalPageVideo = res.data.last_page;
						// console.log(res.data, 'resssss')
						var arr = res.data.data.map((items, indexs) => {
							return {
								...items,
								disabled: true
							}
						})
						// this.videoList = arr;
						this.videoList = [...this.videoList,...arr];
					} else {
						this.totalPageAudio = res.data.last_page;
						var arr = res.data.data.map(item => {
							return {
								...item,
								isClick: false
							}
						})
						this.voiceList = [...this.voiceList,...arr];
					}

				}).catch(err => {

				})
			},
			// // 获取视频列表
			// getVideo(){
			// 	audioList({
			// 		uid: uni.getStorageSync("userId")
			// 	}).then(res => {

			// 	}).catch(err => {

			// 	})
			// },
			changeType(index) {
				this.current = index;
				if(this.current == 0){
					this.voiceList = [];
					this.pageAudio = 1;
				}else {
					this.videoList = [];
					this.pageVideo = 1;
				}
				this.getVideoAiduo();
				

			},
			toAddAudio() {
				uni.navigateTo({
					url: '/pagesCreate/addAudioOption/index?toOptionType=3'
				})
			},
			loginSuccess() {
				console.log('登录成功')
				if (uni.getStorageSync("mobile") == '') {
					console.log('111')
					this.$refs.bindPhone.open();
				}
				this.videoList = [];
				this.pageVideo = 1;
				this.getVideoAiduo();
				this.checkUserInfo();
				this.getUserinfo();
				this.getPurchase();
			},
			// 绑定手机号
			bindSuccess() {
				console.log('绑定手机号成功')
				this.videoList = [];
				this.pageVideo = 1;
				this.getVideoAiduo();
				this.getUserinfo();
				this.getPurchase();
			},
		}
	}
</script>
<style lang="less" scoped>
	/deep/ .u-drawer-bottom {
		background-color: rgba(0, 0, 0, 0) !important;
	}
	/deep/ .u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>
<style>
	@import url(../../static/css/common.css);
	
</style>

<style lang="scss" scoped>
	.item {
		display: flex;
		padding: 20rpx;
	}
	
	.image11 {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}
	
	.title {
		text-align: left;
		font-size: 28rpx;
		color: $u-content-color;
		margin-top: 20rpx;
	}
	// @import url(../../static/css/common.css);

	// page {
	// 	background-color: #fff;
	// 	background-image: url('https://terminator.axu9.com/images/mine-top-bg.png');
	// 	background-size: 100% 517rpx;
	// 	background-repeat: no-repeat;
	// }
	.page {
		background-color: #fff;
		background-size: 100% 517rpx;
		background-repeat: no-repeat;
	}

	.ml-13-5 {
		margin-left: 27rpx;
	}

	.mt-11 {
		margin-top: 22rpx;
	}



	.ml-90-5 {
		margin-left: 181rpx;
	}

	.mt-12-5 {
		margin-top: 25rpx;
	}

	.mt-10-5 {
		margin-top: 21rpx;
	}

	.mt-6-5 {
		margin-top: 13rpx;
	}

	.mt-5 {
		margin-top: 10rpx;
	}

	.mb-11 {
		margin-bottom: 11rpx;
	}

	.page {
		/* padding-top: 35rpx;
	  background-color: #ffffff;
	  height: 100%;
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden; */
	}

	.image {
		width: 655rpx;
		height: 24rpx;
	}

	.font {
		font-size: 36rpx;
		font-family: PingFang SC;
		line-height: 34rpx;
		font-weight: 500;
		color: #111111;
		width: 200rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.text {
		margin-top: 46rpx;
	}

	.group {
		/* margin: 57rpx 0 -34rpx; */
	}

	.group_2 {
		padding: 0 30rpx;
	}

	.group_3 {
		padding: 0 8rpx 25rpx;
	}

	.avatar-wrap {
		width: 138rpx;
		height: 138rpx;
		background: #ffffff;
		box-shadow: 0 0 38rpx 11rpx #bebebe1a;
		border-radius: 50%;
	}

	.image_2 {
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
	}

	.text_3 {
		color: #999999;
	}

	.user-level-img {
		width: 35rpx;
		height: 37rpx;
	}

	.user-level-btn {
		/* margin-left: 7rpx; */
		/* padding: 0 7rpx; */
		background-image: linear-gradient(100deg, #2d94fd 0%, #baf7fc 100%);
		border-radius: 16rpx;
		width: 118rpx;
		color: #ffffff;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 500;
		margin-top: 20rpx;
		margin-left: -6rpx;
		/* line-height: 17rpx; */

	}

	.user-level-btn-yin {
		background-image: url('https://terminator.axu9.com/images/yinpai-icon-blue.png');
		width: 101rpx;
		height: 37rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #ffffff;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 500;
		padding-left: 20rpx;
		margin-top: 21rpx;
	}

	.user-level-btn-jin {
		background-image: url('https://terminator.axu9.com/images/jinpai-icon.png');
		width: 101rpx;
		height: 37rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #ffffff;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 500;
		padding-left: 20rpx;
		margin-top: 21rpx;
	}

	.score-btn {
		/* padding: 14rpx 0;
		background-image: linear-gradient(90deg, #00c959 0%, #19d5b5 100%);
		box-shadow: 0rpx 8rpx 8rpx 1rpx #04c05721;
		border-radius: 26rpx;
		height: 52rpx; */
		background-image: url('https://terminator.axu9.com/images/mine-jifen-bg1.png');
		width: 252rpx;
		padding: 10rpx;
		min-height: 112rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.score-img {
		width: 58rpx;
		height: 24rpx;
		margin-left: 21rpx;
	}

	.text-wrapper {
		/* margin-top: 16rpx; */
		padding: 14rpx 0;
		background-image: linear-gradient(88deg, #0153ab 0%, #33c5d8 34%, #00c959 86%, #00c959 100%);
		border-radius: 26rpx;
		width: 148rpx;
		height: 52rpx;
	}

	.text_2 {
		font-weight: 600;
		font-size: 38rpx;
		color: #111111;
		max-width: 70%;
		word-break: break-all;
		text-align: center;
		line-height: 38rpx;
	}

	.option-mine {
		width: 690rpx;
		height: 152rpx;
		border-radius: 24rpx;
		background: #fefffe;
		box-shadow: 4rpx 10rpx 44rpx 7rpx #c7d3d033;
		padding: 0 20rpx;
	}

	.dui-btn-top {
		height: 64rpx;
	}

	.dui-btn-img {
		width: 72rpx;
		height: 58rpx;
	}

	.jifen-btn-img {
		width: 62rpx;
		height: 62rpx;
	}

	.shou-btn-img {
		width: 54rpx;
		height: 64rpx;
	}

	.more-btn-img {
		width: 66rpx;
		height: 56rpx;
	}

	.dui-btn-text {
		font-weight: 500;
		font-size: 22rpx;
		color: #111111;
		margin-top: 8rpx;
	}

	.section {
		padding: 36rpx 40rpx;
		border-radius: 24rpx;
		background-image: url('https://terminator.axu9.com/images/sqfws-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.group_4 {
		line-height: 35rpx;
	}

	.text_4 {
		color: #ffffff;
		font-size: 36rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 900;
		line-height: 35rpx;
	}

	.text_5 {
		margin-left: 10rpx;
		color: #ffffff;
		font-size: 24rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 900;
		line-height: 24rpx;
	}

	.group_5 {
		padding: 0 9rpx;
	}

	.image_3 {
		width: 18rpx;
		height: 24rpx;
	}

	.image_33 {
		width: 18rpx;
		height: 22rpx;
	}

	.font_3 {
		font-size: 20rpx;
		font-family: PingFang SC;
		color: #ffffff;
		margin-left: 10rpx;
	}

	.text_6 {
		line-height: 20rpx;
	}

	.text_7 {
		line-height: 16rpx;
	}

	.group_6 {
		padding-bottom: 57rpx;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 27rpx;
		color: #111111;
		margin-right: 180rpx;
	}

	.font_4:last-child {
		margin-right: 0;
	}

	.text_8 {
		margin-left: 219rpx;
	}

	.text_9 {
		line-height: 26rpx;
	}

	.section_2 {
		margin-left: 223rpx;
		background-color: #00bf60;
		border-radius: 3rpx;
		width: 46rpx;
		height: 6rpx;
	}

	.equal-division {
		/* margin: 3rpx 24rpx 0; */
		width: 674rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-bottom: 100rpx;
	}

	.group_7 {
		/* flex: 1 1 350rpx; */

	}

	.equal-division-item {
		/* padding: 10rpx 10rpx 10rpx 14rpx; */
		width: 48%;
	}

	/* .section_4 {
	  border-radius: 24rpx;
	  background-image: url('https://ide.code.fun/api/image?token=66aae6ad47b10e0011272870&name=e0fd0f449dfc3bf671d042a7c187d5aa.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	} */
	
	
	.video-poster {
		/* width: 327rpx; */
		height: 450rpx;
		width: 100%;
		/* height: 450rpx; */
		border-radius: 24rpx;
	}
	.edit-title-img {
		width: 24rpx;
		height: 24rpx;
		margin-left: 10rpx;
	}

	// .section_3 {
	// 	width: 100%;
	// 	height: 100%;
	// 	background-color: #1111118a;
	// 	border-radius: 24rpx;
	// 	position: absolute;
	// 	z-index: 999;
	// }
	.section_3 {
		/* padding: 170rpx 19rpx 186rpx 42rpx; */
		width: 100%;
		/* height: 100%; */
		/* width: 327rpx; */
		height: 450rpx;
		/* background-color: #1111118a; */
		border-radius: 24rpx;
		/* position: absolute;
		z-index: 999; */
		// background-image: url("https://terminator.axu9.com/images/mine-video-poster.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.text_10 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 31rpx;
	}

	.text_11 {
		margin-right: 14rpx;
		margin-top: 23rpx;
		color: #ffffff;
		font-size: 22rpx;
		font-family: PingFang SC;
		line-height: 17rpx;
	}

	.section_6 {
		margin-top: 7rpx;
		/* background-color: #ffffff61; */
		border-radius: 8rpx;
		/* width: 70%; */
	}

	.hecheng-loading-img {
		width: 200rpx;
		height: 200rpx;
	}

	.section_7 {
		background-image: linear-gradient(88deg, #0153ab 0%, #33c5d8 34%, #00c959 86%, #00c959 100%);
		border-radius: 8rpx;
		width: 158rpx;
		height: 16rpx;
	}

	.options {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		z-index: 999;
	}

	.font_5 {
		max-width: 100%;
		font-size: 28rpx;
		word-break: break-all;
		font-family: PingFang SC;
		/* line-height: 27rpx; */
		font-weight: 500;
		margin-bottom: 25rpx;
		color: #111111;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 限制在一个块元素显示的文本的行数 */
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	
	}

	.text_12 {
		margin-left: 3rpx;
	}

	.section_5 {
		padding: 32rpx 19rpx 261rpx;
		border-radius: 24rpx;
		background-image: url('https://ide.code.fun/api/image?token=66aae6ad47b10e0011272870&name=e0fd0f449dfc3bf671d042a7c187d5aa.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.huancun-icon {
		border-radius: 50%;
		background-color: red;
		background-color: rgba(0, 0, 0, 0.3);
		width: 67rpx;
		height: 67rpx;
	}
	.image_4 {
		width: 67rpx;
		height: 68rpx;
	}
	.img-huancun {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
	}

	.group_8 {
		margin-top: 20rpx;
		padding: 0 36rpx;
	}

	.section_8 {
		flex: 1 1 326rpx;
		padding: 32rpx 19rpx 261rpx;
		border-radius: 24rpx;
		background-image: url('https://ide.code.fun/api/image?token=66aae6ad47b10e0011272870&name=e0fd0f449dfc3bf671d042a7c187d5aa.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 450rpx;
	}

	.view {
		margin-left: 24rpx;
	}

	.section_9 {
		padding: 0 89rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 9.4rpx 0.6rpx #c3c3c36e;
	}

	.pos {
		position: absolute;
		left: 0;
		right: 0;
		top: 322rpx;
	}

	.group_10 {
		width: 72rpx;
	}

	.image_7 {
		width: 41rpx;
		height: 43rpx;
	}

	.font_6 {
		font-size: 20rpx;
		font-family: PingFang SC;
		line-height: 19rpx;
		font-weight: 500;
		color: #111111;
	}

	.image_6 {
		width: 38rpx;
		height: 48rpx;
	}

	.group_9 {
		margin-right: 3rpx;
	}

	.image_5 {
		width: 72rpx;
		height: 72rpx;
	}

	.image_55 {
		width: 88rpx;
		height: 40rpx;
		margin-right: 40rpx;
	}

	.image_opt {
		width: 80rpx;
		height: 80rpx;
	}
	.image_empt {
		width: 400rpx;
		height: 400rpx;
		margin-top: 100rpx;
	}

	.active {
		position: relative;
	}

	.active::after {
		position: absolute;
		content: "";
		left: 50%;
		bottom: -20rpx;
		transform: translateX(-50%);
		background-color: $theme-color;
		border-radius: 3rpx;
		width: 46rpx;
		height: 6rpx;
	}

	.add-voice {
		/* padding: 52rpx 0 55rpx; */
		// background-image: url('https://terminator.axu9.com/images/mine-add-audio-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		/* border-radius: 20rpx; */
		width: 690rpx;
		height: 136rpx;
	}

	.add-voice-img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.add-voice-text {
		font-size: 30rpx;
		font-family: PingFang SC;
		color: #fff;
	}

	.voice-list {
		width: 690rpx;
	}

	.voice-list-item {
		width: 698rpx;
		/* padding: 52rpx 29rpx 52rpx 32rpx; */
		padding: 20rpx 29rpx 20rpx 32rpx;
		/* background-color: #f5f5f5; */
		// background-image: linear-gradient(90deg, #d6f4ed 0%, #ebfaf6 100%);
		background-color: $mine-yinse-used-bg;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	.voice-list-item-lf {
		/* width: 50%; */
		color: $mine-yinse-listitem-text-color;
		font-size: 30rpx;
	}

	.voice-list-status-img {
		width: 24rpx;
		height: 32rpx;
	}

	.voice-list-status-img1 {
		width: 18rpx;
		height: 27rpx;
	}
</style>